<template>
	<view class="fenleibjs" style="padding: 0rpx 0rpx 100rpx 0rpx;">
		<goods-list :list="goodsList"></goods-list>
		<!-- 内容 -->
		<view class="leftclass_box">
			<!--左边侧边栏 -->
			<view class="leftclass word_baiba hei">
				<scroll-view scroll-y="true" class="scroll-Yleft">
					<view :class="index==current?'itemlistfocus':'itemlist'" v-for="(item,index) in cateList"
						:key="item.id" @click="changecurrent(index,item)">
						<view class="line line_orange" v-if="index==current && Colortype==0"></view>
						<view class="line line_blue" v-if="index==current && Colortype==3"></view>
						<view class="line line_green" v-if="index==current && Colortype==1"></view>
						<view class="line line_shen" v-if="index==current && Colortype==2"></view>
						<view :class="index==current?'itenlisttextfocus0':'itenlisttext'" v-show="Colortype==0">{{item.name}}</view>
						<view :class="index==current?'itenlisttextfocus1':'itenlisttext'" v-show="Colortype==1">{{item.name}}</view>
						<view :class="index==current?'itenlisttextfocus2':'itenlisttext'" v-show="Colortype==2">{{item.name}}</view>
						<view :class="index==current?'itenlisttextfocus3':'itenlisttext'" v-show="Colortype==3">{{item.name}}</view>
						
					</view>
				</scroll-view>
			</view>
			<!-- 右边内容 -->
			<view class="rightcontent ffffff">
				<view class="zwtimg placeholderimg flexcenter" v-if="newGoodsList.total==0">
					<image src="@/static/image/bg-icons/placeholderimg.png" mode=""></image>
				</view>
				<scroll-view scroll-y="true" class="scroll-Yright ">
					<view class="flexstart ffffff margin_top" v-for="item in newGoodsList.data" @click="goGoodsInfo(item.id)" :key="item.id">
						<view class="">
							<image :src="item.images_text[0]" mode="aspectFill" class="img"></image>
						</view>
						<view class="margin_left2">
							<view class=" color_san text_a lianghang">{{item.title}}</view>
							<view class="reds  three_color" v-show="Colortype==0">￥{{item.goodsprice.price}}</view>
							<!-- 三个不同的颜色-->
							 <view class="blue_size  three_color" v-show="Colortype==3">￥{{item.goodsprice.price}}</view>
								  <view class="green_size  three_color" v-show="Colortype==1">￥{{item.goodsprice.price}}</view>
								  <view class="darkblue_size  three_color" v-show="Colortype==2">￥{{item.goodsprice.price}}</view> 
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
	</view>
</template>

<script>
	import goodsList from "@/components/goodList.vue"
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				goodsList: [],
				current: 0,
				listclass: [],
				type: "",
				cateList: [],
				page: 1,
				limit: 12,
				category_id: "", //分类id
				Colortype:0,//0=褐色,1=绿色,2=深蓝,3=浅蓝
				newGoodsList:{
					data:[]
				}
			}
		},
		components: {
			goodsList
		},
		onShareAppMessage: function(options) {
			return {
				title: '工蜂商城',
				imageUrl: '@/static/logo.png',
				path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
			}
		},
		onShareTimeline: function() {
			return {
				title: '工蜂商城',
				imageUrl: '@/static/logo.png',
				path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
			}
		},
		onLoad() {
			uni.hideTabBar(); //隐藏tab
			this.getCateList()
			this.Colortype = this.$store.state.type
		},
		methods: {
			goGoodsInfo(id) {
				uni.navigateTo({
					url: "/pages_index/shangpinxq?id=" + id
				})
			},
			getCateList() {
				let _this = this
				httpRequest.request('/api/goods/goodsCategory', 'GET', {

				}).then(res => {
					if (res.code == 1) {
						this.cateList = res.data
						this.category_id = res.data[0].id
						this.getGoodsList()
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getGoodsList(isPage, page) {
				let _this = this
				httpRequest.request('/api/goods/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					category_id: _this.category_id,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.newGoodsList;
						if (isPage == true) {
							_this.newGoodsList.data = dataList.data.concat(resList.data);
						} else {
							this.newGoodsList = res.data
							_this.newGoodsList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.vipGoodsList;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getVipGoods(true, page);
			},
			changecurrent(index, item) {
				this.current = index
				this.category_id = item.id
				this.getGoodsList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orange {
		color: #D48B39;
	}

	.three_color {
		font-size: 28rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		margin-top: 25rpx;
	}

	.img {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.matter {
		padding: 0rpx 24rpx;
	}

	.scroll-Yleft {
		height: calc(100vh - 30rpx);
		width: 185rpx;
	}

	.scroll-Yright {
		height: calc(100vh - 30rpx);
		width: calc(100vw - 190rpx);
		padding: 8rpx 24rpx 30rpx 24rpx;
		box-sizing: border-box;

	}

	.zwtimg {
		padding-top: 400rpx;

		image {
			width: 350rpx;
			height: 350rpx;
		}
	}

	.huisetext {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.yuanshilt {
		margin: auto;
		width: 118rpx;
		height: 118rpx;
		border-radius: 50%;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.sanshi {
		width: 33.33%;
	}

	// 侧边栏
	.secondaryclass {
		width: 100%;
		margin-top: 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.rightcontent {
		width: 100%;

		padding: 0rpx 30rpx 30rpx 190rpx;
		box-sizing: border-box;
	}

	// 未选中背景色
	.itemlist {
		padding: 20rpx 16rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		background: #F9F9F8;
	}

	// 选中背景色
	.itemlistfocus {
		padding: 20rpx 16rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
	}

	.line {
		width: 10rpx;
		border-radius: 10rpx;
		height: 60rpx;

	}

	.line_orange {
		background-color: #F78D2B;
	}

	.line_blue {
		background-color: rgba(20, 132, 198, 1);
	}

	.line_green {
		background-color: rgba(27, 179, 147, 1);
	}

	.line_shen {
		background-color: RGBA(27, 81, 120, 1);
	}

	// 未选中
	.itenlisttext {
		margin-left: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		width: 120rpx;
	}

	// 选中
	.itenlisttextfocus0 {
		margin-left: 10rpx;
		text-align: center;
		font-size: 28rpx;
		color: #F78D2B;
		width: 120rpx;
	}
	.itenlisttextfocus1 {
		margin-left: 10rpx;
		text-align: center;
		font-size: 28rpx;
		color: #1BB393;
		width: 120rpx;
	}
	.itenlisttextfocus2 {
		margin-left: 10rpx;
		text-align: center;
		font-size: 28rpx;
		color: #113E5E;
		width: 120rpx;
	}
	.itenlisttextfocus3 {
		margin-left: 10rpx;
		text-align: center;
		font-size: 28rpx;
		color: 	#1484C6;
		width: 120rpx;
	}

	.leftclass {
		position: fixed;
		left: 0;
		// height: calc(100vh - 0rpx - 50rpx);  
		height: 100vh;
		//overflow-y: auto;
		background: #F9F9F8;
	}

	.leftclass_box {
		//min-height: calc(100vh - 100rpx - 214rpx);
		display: flex;
	}
</style>